<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head lang="en">

    <title>Product Pages</title>

</head>
<body>

<h2 layout:fragment="header">Product Pages</h2>

<div layout:fragment="content" class="container">

    <div th:if="${not #lists.isEmpty(products)}">
        <h2>Product List</h2>
        <table class="table table-striped">
            <tr>
                <th>Id</th>
                <th th:text="#{product.name}">Name</th>
                <th th:text="#{product.description}">Description</th>
                <th th:text="#{product.price}">Price</th>
                <th th:text="#{product.productDate}">Product date</th>
                <th>View</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            <tr th:each="product : ${products}">
                <td th:text="${product.id}"><a href="/product/${product.id}">Id</a></td>
                <td th:text="${product.name}">Product Name</td>
                <td th:text="${product.description}">descirption</td>
                <td th:text="${product.price}">price</td>
                <td th:text="${#dates.format(product.productDate, 'yyyy-MM-dd')}">product date</td>
                <td><a th:href="${'/product/' + product.id}">View</a></td>
                <td><a th:href="${'/product/edit/' + product.id}">Edit</a></td>
                <td><a th:href="${'/product/delete/' + product.id}">Delete</a></td>
            </tr>
        </table>

    </div>

    <!-- Pagination Bar -->
    <div th:fragment='paginationbar'>
        <div>
            <ul class='pagination pagination-centered'>
                <li th:class="${page.firstPage}?'disabled':''">
                    <span th:if='${page.firstPage}'>← First</span>
                    <a th:if='${not page.firstPage}' th:href='@{${page.url}(page=0,size=${page.size})}'>← First</a>
                </li>
                <li th:class="${page.hasPreviousPage}? '' : 'disabled'">
                    <span th:if='${not page.hasPreviousPage}'>«</span>
                    <a th:if='${page.hasPreviousPage}' th:href='@{${page.url}(page=${page.number-2},size=${page.size})}' title='Go to previous page'>«</a>
                </li>
                <li th:each='item : ${page.items}' th:class="${item.current}? 'active' : ''">
                    <span th:if='${item.current}' th:text='${item.number}'>1</span>
                    <a th:if='${not item.current}' th:href='@{${page.url}(page=${item.number-1},size=${page.size})}'><span th:text='${item.number}'>1</span></a>
                </li>
                <li th:class="${page.hasNextPage}? '' : 'disabled'">
                    <span th:if='${not page.hasNextPage}'>»</span>
                    <a th:if='${page.hasNextPage}' th:href='@{${page.url}(page=${page.number},size=${page.size})}' title='Go to next page'>»</a>
                </li>
                <li th:class="${page.lastPage}? 'disabled' : ''">
                    <span th:if='${page.lastPage}'>Last →</span>
                    <a th:if='${not page.lastPage}' th:href='@{${page.url}(page=${page.totalPages - 1},size=${page.size})}'>Last →</a>
                </li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>